<template>
  <div
    id="container"
    class="text-white text-sm bg-primary-300 min-h-screen pb-4"
  >
    <Header />
    <div id="main" class="bg-primary-300 p-6 text-black">
      <div class="rounded bg-white mx-4 my-4 py-6">
        <div class="px-6">
          <h1 class="text-lg font-semibold">我的收藏</h1>
        </div>
      </div>
      <div class="rounded bg-white mx-4 mt-4 py-6">
        <div v-if="info && info.length > 0">
          <div
            id="book-list"
            class="p-2 grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4"
          >
            <div class="book" v-for="book in info" :key="book.id">
              <div class="relative">
                <a :href="'/book/' + book.id">
                  <img
                    :src="book.cover_image_url"
                    alt="封面加载失败"
                    class="rounded h-full w-full object-contain"
                    referrerPolicy="no-referrer"
                    v-if="book.cover_image_url"
                  />
                  <img
                    v-else
                    src="../assets/images/default_cover.jpg"
                    alt="默认封面"
                    class="rounded h-full w-full object-contain"
                  />
                  <div
                    class="rounded absolute text-white bottom-0 right-0 bg-blue-500 px-1 text-sm"
                  >
                    {{ book.category_name }}
                  </div>
                  <p>{{ book.name }}</p>
                  <p class="text-primary-200">作者: {{ book.user_name }}</p>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div v-else class="text-center text-2xl p-8">暂无作品</div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import axios from "axios";

export default {
  name: "Collect",
  data: function () {
    return {
      info: "",
    };
  },
  components: { Header, Footer },
  mounted() {
    this.get_cellect_book();
  },
  methods: {
    get_cellect_book() {
      const accessToken = window.localStorage.getItem("token");
      axios
        .get("/api/collect/", {
          headers: {
            Authorization: "JWT " + localStorage.getItem("token"),
          },
        })
        .then((response) => {
          this.info = response.data;
          console.log(this.info);
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

<style scoped>
.book {
  padding: 0.5rem;
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.book:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.cover {
  overflow: hidden;
}
</style>
